<template>
    <div
        class="el-tab-pane"
        v-show="active"
        :id="`pane-${paneName}`"
        :aria-labelledby="`tab-${paneName}`"
    >
        <slot></slot>
    </div>
</template>
<script>
    export default {
        props: {
            label: String,
            name: String
        },
        data() {
            return {}
        },
        computed: {
            active() {
                return this.$parent.currentValue === (this.name || this.label)
            },
            paneName() {
                return this.label
            }
        },
        mounted() {
            if (!this.$parent.navList[0] || this.$parent.navList.indexOf(this.label) < 0) {
                this.$parent.navList.push({
                    label: this.label,
                    name: this.name
                })
            }
        }
    }
</script>
